{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/home/css/detail.css?v={$version}">
{/block}

{block name="main"}
    <!-- 中间内容区域 -->
    <div class="content-area detail-box">
        <div class="head-line inline-box">
            <div class="left inline-block inline-box">
                <div class="cinfo inline-block">
                    <div class="number inline-box">
                        <div class="item-box inline-block inline-box">
                            <div class="icon reading inline-block"></div>
                            <div class="words inline-block">{$vo.pv}次</div>
                        </div>
                        <div class="item-box inline-block inline-box">
                            <div class="icon datetime inline-block"></div>
                            <div class="words inline-block">{$vo.update_time}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right inline-block inline-box">
                <div class="action-box inline-block">
                    <div onclick="like_action(this)" class="icon like {if condition='$is_like eq 0'}unlike{/if}"></div>
                    <div class="name"><span id="like_num">{$vo.like_num}</span>赞</div>
                </div>
                <!--
                <div class="action-box inline-block">
                    <div class="icon collect"></div>
                    <div class="name">收藏</div>
                </div>
                <div class="action-box inline-block">
                    <div class="icon share"></div>
                    <div class="name">分享</div>
                </div>-->
            </div>
        </div>

        <div class="content-wrapper-box">
            {$vo.detail}
        </div>


        {include file='base_message/pic_list'/}

        {include file='base_message/comment_list'/}
    </div>
    <!-- 中间内容区域 END -->

    <!-- 弹窗部分 -->
    <div class="transparent-masker"></div>

    <div class="comment-chosen-pop-box">
        <div class="chosen-box inline-box">
            {foreach name="tag_list" item="item"}
                <div class="citem inline-block" data-id="{$item.id}">{$item.name}</div>
            {/foreach}
        </div>

        <div class="submit-btn">发表评论</div>
    </div>
    <div class="comment-chosen-img-box">
        <img id="origin-img">
    </div>
    <!-- 弹窗部分 END -->
{/block}
{block name="script"}
    <script>
        var cname = 'chosen';
        var popCname = 'show';
        var masker = $('.transparent-masker');
        var popBox = $('.comment-chosen-pop-box');
        var imgBox = $('.comment-chosen-img-box');

        $('.comment-chosen-pop-box .chosen-box .citem').click(function(e) {
            var _this = $(this);
            if(_this.hasClass(cname)) _this.removeClass(cname);
            else _this.addClass(cname);
        });

        $('.picture-gallery .title-line .block .publish-btn').click(function(e) {
            masker.addClass(popCname);
            popBox.addClass(popCname);
            $(masker).css('background','none');
            $(masker).css('opacity','1');
        });

        masker.click(function(e) {
            masker.removeClass(popCname);
            popBox.removeClass(popCname);
            imgBox.removeClass(popCname);
        });

        var chosenComment = '';
        $('.comment-chosen-pop-box .submit-btn').click(function(e) {
            var citems = $('.comment-chosen-pop-box .chosen-box .citem.chosen');
            if(citems.length < 1) return false;
            var tempArr = [];
            citems.each(function (ind,elm) {
                tempArr.push($(elm).attr('data-id'));
            });
            chosenComment = tempArr.join(',');
            var url = "{:url('add_comment')}";
            var obj = new Object();
            obj.tag_ids = chosenComment;
            obj.id = {$vo.id};
            $.post(url,obj,function(data){
                if(data.code == 1){
                    alert('评论成功！');
                    window.location.reload();
                }else if(data.code == -2){
                    alert('请先登录');
                    window.location.href = '{:url('home/login/index')}'
                }else{
                    alert(data.msg);
                }
            });
            masker.removeClass(popCname);
            popBox.removeClass(popCname);
        });
        window.onload = function(){
            var url = '{:url("add_pv")}';
            var d = new Object();
            d.id = {$vo.id};
            d.seed = '{$seed}';
            $.post(url,d,function(){

            });
        };
        $('.scroll-item').on('click',function(){
            masker.addClass(popCname);
            imgBox.addClass(popCname);
            $(masker).css('background','black');
            $(masker).css('opacity','0.5');
            $('#origin-img').attr('src',$(this).attr('data-url'));
        });
        function like_action(obj){
            if($(obj).hasClass('unlike')){
                var url = '{:url('like')}'
            }else{
                var url = '{:url('unlike')}';
            }
            var d = new Object();
            d.id = {$vo.id};
            $.post(url,d,function(res){
                if(res.code == 1){
                    $('#like_num').text(res.data.like_num);
                    if($(obj).hasClass('unlike')){
                        $(obj).removeClass('unlike');
                    }else{
                        $(obj).addClass('unlike');
                    }
                }else if(res.code == -2){
                    alert('请先登录');
                    window.location.href = '{:url('home/login/index')}'
                }else{
                    alert(res.msg);
                }
            })
        }

    </script>
{/block}